<template >
  <scroll-view class="" scroll-y :style="{height: wh + 'px'}">
     <view class="headcolor">  </view>
     <view class="big-box">
       <uni-section title="服务标准" type="line" padding style="height: calc(100vh - 100px);">
       		<view class="border">
       		  
       			<uni-data-picker placeholder="服务区域:" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"
       				@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
       			</uni-data-picker>
            </view>
       		</uni-section>
          <uni-section title="服务类型:" type="">
            <view class="type-of-service">
              <uni-fav  v-for="(item,index) in contentText" :key="index" class="unifav-bt" star="false" circle="true" :content-text="item"/>
             
            </view>
          </uni-section>
          <uni-section title="星级标准:" type="">
            <view class="type-of-service">
              <uni-fav  v-for="(item,index) in start" :key="index" class="star-nub" star="false" circle="true" :content-text="item"/>
            </view>
          </uni-section>
     </view>
     <view class="buttom-table">
       <text>家政服务标准查询</text>
     </view>
  </scroll-view>
</template>

 <script>
 	export default {
 		data() {
 			return {
        contentText:[
          {
          contentDefault: '月嫂'
        },
        {
          contentDefault: '育婴师'
        },
        {
          contentDefault: '保洁/清洁'
        },
        {
          contentDefault: '女仆'
        },
        {
          contentDefault: '早教/托'
        },
        {
          contentDefault: '养老/陪'
        },
        {
          contentDefault: '家装/搬'
        },
        {
          contentDefault: '产康师'
        },
        ],
        start:[
          {
          contentDefault: '一⭐'
        },
        {
          contentDefault: '二⭐'
        },
        {
          contentDefault: '三⭐'
        },
        {
          contentDefault: '四⭐'
        },
        {
          contentDefault: '五⭐'
        },
        ],
 				classes: '服务区域',
 				dataTree: [{
 					text: "长沙",
 					value: "1-0",
 					children: [{
 						text: "芙蓉区",
 						value: "1-1"
 					},
 					{
 						text: "雨花区",
 						value: "1-2"
 					}]
 				},
 				{
 					text: "株洲",
 					value: "2-0",
 					children: [{
 						text: "荷塘区",
 						value: "2-1"
 					},
 					{
 						text: "石峰区",
 						value: "2-2"
 					}]
 				},
 				{
 					text: "湘潭",
 					value: "3-0",
 					disable: true
 				}]
 			}
 		},
 		methods: {
 			onnodeclick(e) {
 				console.log(e);
 			},
 			onpopupopened(e) {
 				console.log('popupopened');
 			},
 			onpopupclosed(e) {
 				console.log('popupclosed');
 			},
 			onchange(e) {
 				console.log('onchange:', e);
 			}
 		}
 	}
</script>

<style lang="scss">

	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		// height: 400px;
		border: 1px #e5e5e5 solid;
	}

	 .popper__arrow {
    top: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #EBEEF5;
}
 .popper__arrow {
    top: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #EBEEF5;
}

  .headcolor{
    height: 56rpx;
    width: 100%;
    background:#3F51B5;
  }
  .big-box{
   background: #fff;
     margin: 0 30rpx 0rpx 30rpx;
     position: relative;
     top:-36rpx;
     height: 750rpx;
  }
  .border{
    border-bottom: 1px #e5e5e5 solid;
  }
  .type-of-service{
    display: flex;
    flex-wrap: wrap;
    border-bottom:1px solid #e5e5e5 ;
    padding-bottom:30rpx ;
  }
  .unifav-bt{
    margin: 10rpx;
    .uni-fav-text{
      color:rgb(161, 155, 179) !important;
    }
    .uni-fav{
       border: 1px rgb(161, 155, 179) solid !important;
    }
  }
  .star-nub{
    margin: 10rpx;
    .uni-fav-text{
      color:rgb(161, 155, 179) !important;
    }
    .uni-fav{
       border: 1px rgb(161, 155, 179) solid !important;
    }
  }
  .buttom-table{
    line-height: 100rpx;
    background-color:#3F51B5 ;
    text-align: center;
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
     bottom:0;
  }
</style>
